<template>
    <div class="news-container">
        <div class="tabs">
            <div class="item">
                <div class="img first" @click="currentType = 'express'">
                    <svg class="icon first" aria-hidden="true">
                        <use xlink:href="#icon-logistics"></use>
                    </svg>
                </div>
                <p>物流</p>
            </div>
            <div class="item" @click="currentType = 'system'">
                <div class="img second">
                    <svg class="icon second" aria-hidden="true">
                        <use xlink:href="#icon-notice"></use>
                    </svg>
                </div>
                <p>系统</p>
            </div>
            <div class="item" @click="currentType = 'rebate'">
                <div class="img third">
                    <svg class="icon third" aria-hidden="true">
                        <use xlink:href="#icon-interaction"></use>
                    </svg>
                </div>
                <p>奖励</p>
            </div>
        </div>
        <div class="main">
            <scroll
                    v-show="typeMap[currentType].list.length > 0 && currentType === 'all'"
                    :data="typeMap[currentType].list"
                    :probeType="2"
                    @pullingUp="onPullingUp"
                    :pullUpLoad="false"
            >
                <div class="list">
                    <NewsCard v-for="(item, index) in typeMap['all'].list" :key="index" :news="item"></NewsCard>
                </div>
            </scroll>

            <scroll
                    v-show="typeMap[currentType].list.length > 0 && currentType !== 'all'"
                    :data="typeMap[currentType].list"
                    :probeType="2"
                    @pullingUp="onPullingUp"
                    :pullUpLoad="true"
            >
                <div class="list" v-if="currentType === 'express'">
                    <NewsCard v-for="(item, index) in typeMap['express'].list" :key="index" :news="item"></NewsCard>
                </div>
                <div class="list" v-if="currentType === 'system'">
                    <NewsCard v-for="(item, index) in typeMap['system'].list" :key="index" :news="item"></NewsCard>
                </div>
                <div class="list" v-if="currentType === 'rebate'">
                    <NewsCard v-for="(item, index) in typeMap['rebate'].list" :key="index" :news="item"></NewsCard>
                </div>
            </scroll>
        </div>
        <confirm
                :title="alertMsg"
                :text="textConfirm1"
                :isAlert="false"
                ref="wechat"
                @cancel="weCancel"
                confirmBtnText="去设置"
                @confirm="weFirm"></confirm>
    </div>
</template>

<script>
    import NewsCard from './news-card';
    import api from '@/request/api';
    import Scroll from 'common/scroll';
    import API from '../../request/api';
    import {commonMixin} from '@/common/mixin';
    import Confirm from '@/components/common/confirm';

    export default {
        name: 'news',
        mixins: [commonMixin],
        components: {Confirm, NewsCard, Scroll},
        data() {
            return {
                //all-所有,rebate-返利,express-物流,system-系统
                currentType: 'all',
                typeMap: {
                    rebate: {
                        page: 1,
                        length: 10,
                        list: []
                    },
                    express: {
                        page: 1,
                        length: 10,
                        list: []
                    },
                    system: {
                        page: 1,
                        length: 10,
                        list: []
                    },
                    all: {
                        page: 1,
                        length: 10,
                        list: []
                    }
                },
                textConfirm1: '您还未设置过密码或密码已失效为了您的账户安全请先设置密码',
                alertMsg: '提示'
            };
        },
        props: {},
        computed: {},
        created() {
            // 外层动画关闭
            // document.getElementById('img').style.display = 'none';
            if (this.currentType === 'all') {
                this._getAllList();
            } else {
                this._getNewsList();
            }
            this.checkModify();
        },
        mounted() {
        },
        methods: {
            checkModify() {
                this.request.get(API.ismodify, {
                    phone: this.userInfo.realphone,
                    system: this.userInfo.system_id
                }).then((res) => {
                    // 查看是否设置过密码
                    if (res.ismodify == 0) {
                        // 没修改过，弹窗
                        this.$refs.wechat.show();
                    }
                });
            },
            weCancel() {
                // 下次再设置密码
                this.$router.back();
            },
            weFirm() {
                //  去设置密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: '3',
                        state: true
                    }
                });
            },
            _getNewsList(paramType) {
                let type = paramType || this.currentType;
                return this.request
                    .get(api[type + 'Msg'], {
                        page: this.typeMap[type].page,
                        length: this.typeMap[type].length,
                    })
                    .then((res) => {
                        let currentList = this.typeMap[type].list;
                        this.$set(this.typeMap[type], 'list', currentList.concat(res.list));

                        // 页码++
                        this.typeMap[type].page++;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            async _getAllList() {
                await Promise.all([await this._getNewsList('rebate'), this._getNewsList('express'), await this._getNewsList('system')]);

                this._sortAllList();
            },
            _sortAllList() {
                let rebateList = this.typeMap['rebate'].list;
                let expressList = this.typeMap['express'].list;
                let systemList = this.typeMap['system'].list;
                let allList = [...rebateList, ...expressList, ...systemList];
                allList.sort((a, b) => {
                    if (new Date(a.created.replace(/-/g, "/")) > new Date(b.created.replace(/-/g, "/"))) {
                        return -1
                    } else if (new Date(a.created.replace(/-/g, "/")) < new Date(b.created.replace(/-/g, "/"))) {
                        return 1
                    }
                    return 0;
                });
                this.typeMap['all'].list = allList;
            },
            onPullingUp() {
                if (this.currentType !== 'all') {
                    this._getNewsList();
                }
            }
        },
        watch: {
            // currentType() {
            //     this._getNewsList();
            // }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'

    * {
        box-sizing border-box
    }

    .news-container {
        position relative
        width 100vw
        background-color #F5F5F5
        .tabs {
            width 100vw
            height vh(92)
            padding vh(10) vw(35)
            background-color grayF
            flex-x()
            .item {
                width vw(48)
                height vh(72)
                flex-y()
                .img {
                    width vh(48)
                    height vh(48)
                    border-radius all-radius
                    flex-x(center, center)
                    .icon {
                        fill grayF
                        &.first {
                            width vh(34)
                            height vh(21)
                        }
                        &.second {
                            width vh(23)
                            height vh(25)
                        }
                        &.third {
                            width vh(25)
                            height vh(22)
                        }
                    }
                    &.first {
                        background linear-gradient(180deg, rgba(66, 178, 243, 1) 0%, rgba(100, 206, 246, 1) 100%);
                    }
                    &.second {
                        background linear-gradient(180deg, rgba(250, 208, 34, 1) 0%, rgba(248, 222, 66, 1) 100%);
                    }
                    &.third {
                        background linear-gradient(180deg, rgba(219, 63, 143, 1) 0%, rgba(238, 111, 176, 1) 100%);
                    }
                }
                p {
                    word-vw(word16, gray3)
                    line-height vw(21)
                }

            }
        }
        .main {
            padding 0 cellPadding
            height vh(539)
            .list {
                height 100%
                padding-top 1px
            }
        }

    }
</style>
